import React from 'react';
import { TabNavigator } from 'react-navigation';
import {
  View,
  Platform,
  StyleSheet,
  Text,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import ImportOverview from '../../containers/ImportOverviewContainer';
import OverviewAnalysis from '../../containers/OverviewAnalysisContainer';
import EverydayTrend from '../../containers/EverydayTrendContainer';

const Routes = {
  重点概览: { screen: ImportOverview },
  客户偏好: { screen: OverviewAnalysis },
  每日趋势: { screen: EverydayTrend },
};

const TabConfig = {
  stateName: 'DataScreenNavigator',
  lazy: true, // 是否懒加载
  initialRouteName: '重点概览',
  tabBarPosition: 'top',
  animationEnabled: false,
  swipeEnabled: true,
  ...TabNavigator.Presets.AndroidTopTabs,
  tabBarOptions: {
    activeTintColor: '#121212', // 当前活动tab字体颜色
    inactiveTintColor: '#666',  // 默认字体颜色
    indicatorStyle: {
      borderBottomColor: '#121212',
      borderBottomWidth: 3,
      width: PxToDp(12),
      marginLeft: PxToDp(61),
    },
    scrollEnabled: false, // 不允许tab上的文字滑动
    showIcon: false,
    pressOpacity: 0.8,
    style: {
      height: 44,
      backgroundColor: '#fff',
      elevation: 0,
    },
    labelStyle: {
      fontSize: 14,
      fontFamily: FontFamilys(),
    },
  },
};

const DataScreenNavigator = TabNavigator(Routes, TabConfig);

class Datas extends React.Component {

  render() {
    console.log(this.props);
    return (
      <View style={[style.wrrap, style.flex]}>
        <View style={[style.header, style.row]}>
          <Text style={style.title}>数据</Text>
        </View>
        <DataScreenNavigator screenProps={this.props} />
      </View>
    );
  }
}
const style = StyleSheet.create({
  flex: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  wrrap: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  row: {
    flexDirection: 'row',
  },
  header: {
    height: PxToDp(44),
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#333333',
  },
});

export default Datas;

